<template>
  <div class="JLHeader">
    <div class="innerBox clearfix">
      <!-- @click='toggle = !toggle' -->
      <div class="mainTitle pull-left" :class='{active:toggle}' >
        <img src="../assets/images/app.png" class='mainLogo'>
        巨梨日志后台管理系统
      </div>

      <!-- <div v-if='isLogin' class="pull-right ritem"><i class="fa fa-gear"></i>设置</div> -->

      <div v-if='isLogin' class="pull-right ritem" @click='exitLogin'><i class="fa fa-power-off"></i>退出</div>

      <div v-if='isLogin' class="pull-right ritem userName">欢迎登陆</div>

    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      toggle:false,
      isLogin:0
    }
  },
  computed:{

  },
  methods:{
    exitLogin(){

      this.$confirm('确认退出登录吗').then( res =>{
        // 成功操作
        tools.clearSession();
        this.tourl('/');
        return

        tools.ajax({
          url:'/api/user/logout',
          data:{}
        })
        .then( res =>{
          tools.clearSession();
          this.tourl('/');
        })
      }).catch(e=>{
        // 错误操作
      })

    },
    tourl(url,query){
      url && tools.router.push({path:url,query:query || {}});
    }
  },
  watch:{
    '$route'(){
      this.isLogin = tools.getSession('isLogin')
    }
  },
  mounted(){
    this.isLogin = tools.getSession('isLogin')
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='scss'>
@import '../assets/scss/tool.scss';
// @import '../assets/faicon/css/font-awesome.min.css';
  .JLHeader{
      width: 100%;
      @include lah(88px);
      background: $mainColor;
      color: $black;
      padding: 0 25px;

      .innerBox{
        width: 100%;
        height: 88px;
        margin:0 auto;

        // 主标题
        .mainTitle{
          color: $black;
          font-size: 26px;
          overflow: hidden;
          width: 288px;
          height: 88px;
          transition: width .3s ease;

          &.active{
            width: 80px;
          }

          span{
            font-weight: bold;
          }

          .mainLogo{
            width: 50px;
            height: 50px;
            position: relative;
            top: 17px;
            margin-right: 10px;
          }
        }

        .ritem{
          margin-left: 20px;
          font-size: 17px;
          @include hand;
          i{
            margin-right: 6px;
          }
        }

      }
  }

</style>
